<script setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useGlobalStore } from "@/stores/golbal";
const { guessProductList } = storeToRefs(useGlobalStore());

const props = defineProps({
  width: {
    type: String,
    default: "15%",
  },
});
//获取猜你想要图片
const getguessProductUrl = (name) => {
  return new URL(`/src/assets/guessproductPicture/${name}`, import.meta.url)
    .href;
};
//获取背景图片
const getBackgroundUrl = (name) => {
  return new URL(`/src/assets/avatarImages/${name}`, import.meta.url).href;
};
//是否登录
const isLogin = ref(false);
</script>

<template>
  <div
    :style="{
      width: props.width,
      backgroundImage: `url(${getBackgroundUrl('bg_2.png')})`,
    }"
    class="suspended-content-content"
  >
    <!-- 标题 -->
    <div class="suspended-content-top-title">
      <div class="title">欢迎来到</div>
      <div class="title">农品智联</div>
    </div>
    <!-- 未登录 -->
    <div v-if="!isLogin">
      <!-- 头像 -->
      <img :src="getBackgroundUrl('avatar_2.png')" alt="" />
      <!-- 登录 & 注册 按钮 -->
      <div class="suspended-content-button">
        <div
          :style="{
            backgroundImage: `url(${getBackgroundUrl('group_2.png')})`,
          }"
          class="suspended-content-button-register"
        >
          注册
        </div>
        <div
          :style="{
            backgroundImage: `url(${getBackgroundUrl('group_3.png')})`,
          }"
          class="suspended-content-button-login"
        >
          登录
        </div>
      </div>
    </div>

    <!-- 已登录 -->
    <div v-else>
        <!-- 头像 -->
        <img :src="getBackgroundUrl('avatar_2.png')" alt="" />
        <!-- 登录 & 注册 按钮 -->
        <div class="suspended-content-button">
          <div
            :style="{
              backgroundImage: `url(${getBackgroundUrl('group_2.png')})`,
            }"
            class="suspended-content-button-register"
          >
            注册
          </div>
          <div
            :style="{
              backgroundImage: `url(${getBackgroundUrl('group_3.png')})`,
            }"
            class="suspended-content-button-login"
          >
            登录
          </div>
        </div>
      </div>  
    <!-- 公告 -->
    <div
      class="suspended-content-notice"
      :style="{ backgroundImage: `url(${getBackgroundUrl('group_1.png')})` }"
    >
      <div class="notice-title">公告</div>
      <div class="notice-content">
        <div class="notice-content-item">平台总则</div>
        <div class="notice-content-item">店铺命名规则</div>
        <div class="notice-content-item">入驻须知</div>
      </div>
    </div>
    <!-- 猜你想要：推荐商品 -->
    <div class="suspended-content-recommend">
      <div class="recommend-title">猜你想要</div>
      <!-- <div class="recommend-content">暂无推荐</div> -->
      <div class="recommend-product-list">
        <img
          v-for="(guess, index) in guessProductList"
          class="recommend-product-item"
          :src="getguessProductUrl(guess.image)"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.suspended-content-content {
  background-size: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0;
  padding: 0 20px;
}
.suspended-content-top-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10%;
  margin-bottom: 10%;
  .title {
    font-size: var(--szc-font-main-big);
    font-weight: bold;
    color: #f5f5f5;
  }
}
.suspended-content-button {
  display: flex;
  justify-content: space-around;
  margin: 20% 0 20% 0;
  width: 100%;
  div {
    width: 45%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #000;
    font-size: var(--szc-font-main-middle);
    font-weight: 700;
  }
}
.suspended-content-button-login {
  background-size: 100% 100%;
  /* background-size: "cover"; */
  /* background-position: "center";  */
}
.suspended-content-button-register {
  background-size: 177% 100%;
}

.suspended-content-notice {
  width: 85%;
  height: 20%;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 25% 15%;
  .notice-title {
    position: absolute;
    top: 2%;
    left: 13%;
    color: #000;
    font-size: var(--szc-font-main-small);
    font-weight: 700;
  }
  .notice-content {
    .notice-content-item {
      margin-bottom: 5%;
      font-size: var(--szc-font-main-small);
      color: #000;
    }
  }
}

.suspended-content-recommend {
  .recommend-title {
    margin: 10% 0 5% 0;
    font-size: var(--szc-font-main-big);
    font-weight: 700;
    color: #f5f5f5;
  }
  .recommend-product-list {
    width: 100%;
    height: 342px;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* 启用水平滚动条 */
    white-space: nowrap; /* 避免换行 */
  }

  .recommend-product-item {
    object-fit: contain;
    width: 97%;
    height: 100%; /* 高度自动适应 */
    margin-bottom: 20px; /* 子项之间的间距 */
    object-fit: cover; /* 保持图片比例 */
    border-radius: 42px; /* 圆角边框 */
    box-shadow: 0px 5px 5px #353535;
  }
}
.recommend-product-list::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
 
.recommend-product-list {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
